<template>
  <div class="jbc-container">
    <jbc-menu />
    <div class="jbc-account">
      <el-breadcrumb v-if="pathAll.length" style="margin-top: 5px;padding: 12px 0 20px;" :separator-icon="ArrowRight">
        <el-breadcrumb-item v-for="path in pathAll" :key="path.id" :to="path.url">{{ path.name }}</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="jbc-account--body">
        <div class="jbc-account--menu">
          <router-link class="jbc-account--menu-item" v-for="menu in menus" :key="menu.name" :to="menu.url" :class="{active: menu.key === currentPathName }">{{ menu.name }}</router-link>
        </div>
        <div class="jbc-account--content">
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="account">
import { ArrowRight } from "@element-plus/icons-vue"
const { proxy } = getCurrentInstance()
const route = useRoute()
const pathList = [{ id: '-1', name: '首页', url: '/' }, { id: '1', url: '/account', name: '个人中心' }]
const menuPathMap = {
  setting: { id: '2', name: '个人信息' },
  order: { id: '3', name: '我的订单' },
  after_sale: { id: '4', name: '我的售后' },
  wallet: { id: '5', name: '我的钱包' },
  address: { id: '6', name: '收货地址' },
  collection: { id: '7', name: '我的收藏' },
  feedback: { id: '8', name: '我的反馈' },
  view_print: { id: '9', name: '我的足迹' },
  log: { id: '10', name: '登录日志' },
  orderDetail: { id: '11', name: '订单详情' }
}
const currentPathName = computed(() => {
  if (route.name === 'orderDetail') {
    return 'order'
  }
  return route.name
})
const pathAll = computed(() => {
  const list = pathList.slice(0)
  if (route.name === 'orderDetail') {
    menuPathMap['order'].url = '/account/order'
    list.push(menuPathMap['order'])
  } else {
    menuPathMap['order'].url = ''
  }
  list.push(menuPathMap[route.name])
  return list
})
const menus = [
  { name: '个人信息', key: 'setting', url: '/account/setting' },
  { name: '我的订单', key: 'order', url: '/account/order' },
  { name: '我的售后', key: 'after_sale', url: '/account/after_sale' },
  { name: '我的钱包', key: 'wallet', url: '/account/wallet' },
  { name: '收货地址', key: 'address', url: '/account/address' },
  { name: '我的收藏', key: 'collection', url: '/account/collection' },
  { name: '我的反馈', key: 'feedback', url: '/account/feedback' },
  { name: '我的足迹', key: 'view_print', url: '/account/view_print' },
  { name: '登录日志', key: 'log', url: '/account/log' }
]
</script>

<style lang="scss" scoped>
.jbc {
  &-container {
    background-color: #fff;
  }
  &-account {
    margin: 0 auto;
    width: var(--box-width);
  }

  &-account--body {
    display: flex;
  }

  &-account--menu {
    width: 270px;
    &-item {
      display: block;
      padding: 18px 20px;
      background-color: var(--jbc-border-color);
      font-size: var(--jbc-font-size-medium);
      &:hover, &[aria-current="page"], &.active {
        background-color: var(--jbc-color);
        color: #fff;
      }
    }
  }

  &-account--content {
    flex: 1;
    margin-left: 40px;
  }
}
</style>